<template>
  <div class="feedback-detail">
    <div class="page-header">
      <div class="back-btn">
        <router-link to="/admin/feedback" class="admin-btn">
          返回列表
        </router-link>
      </div>
      <div class="header-title">
        <h2>反馈详情</h2>
      </div>
    </div>

    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
      <p>加载中...</p>
    </div>

    <div v-else-if="error" class="error-container">
      <p class="error-message">{{ error }}</p>
      <button class="admin-btn" @click="fetchFeedbackData">重试</button>
    </div>

    <div v-else-if="feedback" class="feedback-content">
      <!-- 反馈基本信息 -->
      <div class="info-card">
        <div class="info-header">
          <h3 class="feedback-title">{{ feedback.title }}</h3>
          <div class="status-actions">
            <span :class="getStatusClass(feedback.status)">
              {{ getStatusName(feedback.status) }}
            </span>
            <button
              v-if="feedback.status === 'pending'"
              class="admin-btn admin-btn-primary"
              @click="changeStatus('processing')"
            >
              开始处理
            </button>
            <button
              v-if="feedback.status === 'processing'"
              class="admin-btn admin-btn-success"
              @click="changeStatus('resolved')"
            >
              已解决
            </button>
          </div>
        </div>
        
        <div class="info-meta">
          <div class="meta-item">
            <span class="meta-label">提交用户:</span>
            <span class="meta-value">{{ feedback.username }}</span>
          </div>
          <div class="meta-item">
            <span class="meta-label">提交时间:</span>
            <span class="meta-value">{{ feedback.createdAt }}</span>
          </div>
          <div class="meta-item">
            <span class="meta-label">类型:</span>
            <span :class="['meta-value', getTypeClass(feedback.type)]">
              {{ getTypeName(feedback.type) }}
            </span>
          </div>
        </div>
        
        <div class="info-content">
          <p>{{ feedback.content }}</p>
        </div>
      </div>

      <!-- 回复区域 -->
      <div class="reply-card">
        <h3>回复</h3>
        <div class="reply-form">
          <textarea 
            v-model="replyContent" 
            class="admin-form-input reply-textarea" 
            placeholder="请输入回复内容..."
          ></textarea>
          <div class="reply-actions">
            <button class="admin-btn admin-btn-primary" @click="submitReply">发送回复</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FeedbackDetail',
  data() {
    return {
      feedbackId: null,
      loading: true,
      error: null,
      feedback: null,
      replyContent: ''
    }
  },
  created() {
    this.feedbackId = this.$route.params.id;
    this.fetchFeedbackData();
  },
  methods: {
    fetchFeedbackData() {
      this.loading = true;
      this.error = null;
      
      // 模拟API请求延迟
      setTimeout(() => {
        // 获取样本数据
        const feedback = this.getFeedbackById(this.feedbackId);
        
        if (feedback) {
          this.feedback = feedback;
        } else {
          this.error = '找不到该反馈或已被删除';
        }
        
        this.loading = false;
      }, 500);
    },
    getFeedbackById(id) {
      const feedbacks = [
        {
          id: 1,
          username: 'user123',
          type: 'bug',
          title: '无法完成每日低碳打卡任务',
          content: '我尝试提交每日低碳打卡任务，但系统显示"提交失败"，已经尝试多次。',
          createdAt: '2023-05-18 15:30',
          status: 'pending'
        },
        {
          id: 2,
          username: 'greenlife',
          type: 'feature',
          title: '建议增加团队挑战功能',
          content: '希望能增加团队挑战功能，让朋友们一起参与环保活动，相互鼓励。',
          createdAt: '2023-05-17 10:15',
          status: 'processing'
        }
      ];
      
      return feedbacks.find(f => f.id == id);
    },
    getTypeName(type) {
      const typeMap = {
        'bug': 'Bug反馈',
        'feature': '功能建议',
        'complaint': '投诉',
        'question': '问题咨询',
        'other': '其他'
      };
      return typeMap[type] || '未知类型';
    },
    getTypeClass(type) {
      const classMap = {
        'bug': 'admin-tag admin-tag-red',
        'feature': 'admin-tag admin-tag-blue',
        'complaint': 'admin-tag admin-tag-orange',
        'question': 'admin-tag admin-tag-green',
        'other': 'admin-tag'
      };
      return classMap[type] || 'admin-tag';
    },
    getStatusName(status) {
      const statusMap = {
        'pending': '待处理',
        'processing': '处理中',
        'resolved': '已解决',
        'closed': '已关闭'
      };
      return statusMap[status] || '未知状态';
    },
    getStatusClass(status) {
      const classMap = {
        'pending': 'admin-tag admin-tag-orange',
        'processing': 'admin-tag admin-tag-blue',
        'resolved': 'admin-tag admin-tag-green',
        'closed': 'admin-tag admin-tag-red'
      };
      return classMap[status] || 'admin-tag';
    },
    changeStatus(newStatus) {
      this.feedback.status = newStatus;
      alert(`反馈状态已更新为：${this.getStatusName(newStatus)}`);
    },
    submitReply() {
      if (!this.replyContent.trim()) {
        alert('请输入回复内容');
        return;
      }
      
      alert('回复已发送');
      this.replyContent = '';
      
      // 如果状态是待处理，自动更新为处理中
      if (this.feedback.status === 'pending') {
        this.feedback.status = 'processing';
      }
    }
  }
}
</script>

<style scoped>
.feedback-detail {
  width: 100%;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.header-title h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
}

.loading-container, .error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
}

.loading-spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top: 4px solid #1890ff;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-message {
  color: #ff4d4f;
  margin-bottom: 16px;
}

.feedback-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.info-card, .reply-card {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 24px;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.feedback-title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.status-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.info-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.meta-item {
  display: flex;
  align-items: center;
}

.meta-label {
  color: rgba(0, 0, 0, 0.45);
  margin-right: 8px;
}

.meta-value {
  color: rgba(0, 0, 0, 0.85);
}

.info-content {
  white-space: pre-line;
}

.reply-form {
  margin-top: 16px;
}

.reply-textarea {
  resize: vertical;
  min-height: 120px;
  margin-bottom: 16px;
  width: 100%;
}

.reply-actions {
  display: flex;
  justify-content: flex-end;
}
</style> 